<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>我的捎货</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <style>
          body{

          }
          .top{
          	width:100%;
          	height: 40px;
          	margin: 40px auto 0px;
          	color:#000;
          	border:0px;
          	display: block;
          	text-align: center;
            background: #fafafa;
            }
            .leftreturn{
              position: absolute;
              left:0;
              z-index: 5;
              background-image: url("../../image/leftreturn.png");
              background-position: 0px 0px;
              width:25px;
              height:25px;
              margin:7.5px 0;
            }
            .top-title{
              line-height: 40px;
              font-size: 20px;
            }
          .tabs{
                 width:100%;height:400px;float:left;  background: #fafafa;
             }
          #container{
                 width:100%;height:auto;float:left;   background: #fafafa;
             }
           .ct-ul{
                 width:100%;height:30px;float:left;margin:0px;padding:0px;
             }
             .ct-ul li{
                 width:50%;float:left ;font-size:14px;margin:0px;line-height: 30px;
                 text-align: center;
                  display: inline;
             }
             .act{
               color: #4A87A1;
             }
            li:hover{
             color: #4A87A1;

             display: inline-block;
             cursor: pointer;
            }

            .content{
            	width:95%;
            	height: auto;
            	margin: 10px auto;
            	background: white;
            	color:#000000;
              border: 1px solid #ccc;
              border-radius: 8px;
            	font-size: 14px;
              padding-bottom: 5px;
            }

            .table1{
              width:100%;border:0; cellspacing:0; cellpadding:0;
            }
            .table1 tr td{
              padding:2px 5px;
            }
            .td1{
              width:30%;
              font-size: 14px;
              height:25px;
              line-height: 25px;
              margin-right: 50px;
              border-bottom:solid 1px #ced9df;
            }
            .td2{
              width:70%;font-size: 12px;height:25px;border-bottom:solid 1px #ced9df;line-height: 25px;
            }

            .footer_dd{
              width:auto;
              height:30px;
              padding: 0 10px;
              line-height: 30px;
              text-align: center;
              border: 1px solid #ccc;
              border-radius: 20px;
              margin-right: 8px;
              color: #444343;
              float:left;
            }
      </style>
  </head>
  <body>
    <div class="top">
      <i class="leftreturn"></i>
      <h1 class="top-title">我的捎货</h1>
    </div>
    <div class="tabs">
        <nav id="nav">
           <ul class="ct-ul">
             <li class="act">我的下单</li>
             <li>我的接单</li>
           </ul>
        </nav>
        <div id="container">
           <section class="tab" >
             <div class="item">
               <div class="content">
                 <table class="table1">
                   <tr>
                     <td  class="td1">&nbsp&nbsp下单时间</td>
                     <td   class=td2>2020-01-04</td>
                   </tr>
                   <tr>
                     <td  class="td1">&nbsp&nbsp物件名称</td>
                     <td   class=td2>水果</td>
                   </tr>
                   <tr>
                     <td  class="td1">&nbsp&nbsp取件时间</td>
                     <td   class=td2>2020-01-05</td>
                   </tr>
                   <tr>
                     <td  class="td1">&nbsp&nbsp到达时间</td>
                     <td   class=td2>2020-01-07</td>
                   </tr>
                   <tr>
                     <td  class="td1">&nbsp&nbsp捎货人</td>
                     <td   class=td2>李某<img src="../../image/rightreturn.png" alt="" style="line-height:30px;float:right;"></td>
                   </tr>
                   <tr>
                     <td>

                     </td>
                     <td>
                       <p class="footer_dd">删除下单</p>
                       <p class="footer_dd">查看物流</p>
                     </td>
                   </tr>
                 </table>
               </div>
               <div class="content">
                 <table class="table1">
                   <tr>
                     <td  class="td1">&nbsp&nbsp下单时间</td>
                     <td   class=td2>2020-01-04</td>
                   </tr>
                   <tr>
                     <td  class="td1">&nbsp&nbsp物件名称</td>
                     <td   class=td2>水果</td>
                   </tr>
                   <tr>
                     <td  class="td1">&nbsp&nbsp取件时间</td>
                     <td   class=td2>2020-01-05</td>
                   </tr>
                   <tr>
                     <td  class="td1">&nbsp&nbsp到达时间</td>
                     <td   class=td2>2020-01-07</td>
                   </tr>
                   <tr>
                     <td  class="td1">&nbsp&nbsp捎货人</td>
                     <td   class=td2>无</td>
                   </tr>
                   <tr>
                     <td>

                     </td>
                     <td>
                       <p class="footer_dd">删除下单</p>
                     </td>
                   </tr>
                 </table>
               </div>
             </div>
           </section>
           <section class="tab" >
             <div class="item">
               <div class="content">
                 <table class="table1">
                   <tr>
                     <td  class="td1">&nbsp&nbsp接单时间</td>
                     <td   class=td2>2020-01-05</td>
                   </tr>
                   <tr>
                     <td  class="td1">&nbsp&nbsp物件名称</td>
                     <td   class=td2>水果</td>
                   </tr>
                   <tr>
                     <td  class="td1">&nbsp&nbsp取件时间</td>
                     <td   class=td2>2020-01-05</td>
                   </tr>
                   <tr>
                     <td  class="td1">&nbsp&nbsp取件地址</td>
                     <td   class=td2>湖南省湘潭市</td>
                   </tr>
                   <tr>
                     <td  class="td1">&nbsp&nbsp到达时间</td>
                     <td   class=td2>2020-01-07</td>
                   </tr>
                   <tr>
                     <td>

                     </td>
                     <td>
                       <p class="footer_dd" onclick="qxdd();">取消订单</p>
                     </td>
                   </tr>
                 </table>
               </div>
             </div>
           </section>
         </div>
       </div>

  </body>
  <script>
   window.onload=function () {
   var nav=document.getElementById('nav');
   var oNav=nav.getElementsByTagName('li');

   var container=document.getElementById('container');
   var oDiv=container.getElementsByClassName('tab');
   for(var i=0;i<oNav.length;i++){
    oNav[i].index=i;
    oNav[i].onclick=function () {
    for(var i=0;i<oNav.length;i++){
     oNav[i].className='';
     oDiv[i].style.display="none";
    }
    this.className='act';
    oDiv[this.index].style.display="block"
    }
    for(var m=1;m<oNav.length;m++){
     oNav[m].className='';
     oDiv[m].style.display="none";
    }
   }
   };
  </script>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript">
      function qxdd(){
        alert('取消订单你将支付用户10元违约金，请确认取消订单！');
      }
  </script>
  </html>
